<template>
  <div class="login">
    <img :src="imgSrc" class="img" alt=""/>
    <div class="icon">
      <a-button shape="circle" @click="closeMusic">
        <template #icon>
          <bell-outlined :spin="spin"/>
        </template>
      </a-button>
    </div>
    <div class="loginPart">
      <h2 style="font-family: Berlin Sans FB;  font-size: 40px;">
        Easy to Mental
      </h2>
      <el-form>
        <div class="inputElement">
          <a-form-item has-feedback :validateStatus="type1" :help="message1">
            <a-input
                v-model:value="user.user_id"
                placeholder="请输入账号"
                @change="checkId"
            />
          </a-form-item>
        </div>
        <div class="inputElement">
          <a-form-item has-feedback :validate-status="type2" :help="message2">
            <a-tooltip placement="topLeft">
              <template #title>请输入密码</template>
              <a-input-password
                  v-model:value="user.user_pwd"
                  @change="checkPwd"
                  placeholder="请输入密码"
              />
            </a-tooltip>
          </a-form-item>
        </div>
        <div style="margin-top: 10px">
          <el-button type="primary" @click="login">登录</el-button>
        </div>
        <div style="text-align: right; color: white; margin-top: 10px">
          <el-link
              type="warning"
              @click="goToRegister"
              style="margin-right: 188px"
          >没有账号?去注册
          </el-link>
          <el-link type="warning" @click="openForget">忘记密码</el-link>
        </div>
      </el-form>
    </div>
  </div>
  <a-modal v-model:visible="visible1" title="忘记密码" @ok="gotoForgetPWd">
    <a-form-item
        label="账户id"
        has-feedback
        :validateStatus="type3"
        :help="message3"
    >
      <a-input
          v-model:value="forgetUser.user_id"
          placeholder="请输入账户id"
          @change="checkId2"
      />
    </a-form-item>
  </a-modal>
  <audio
      ref="audio"
      src="backgroundmusic.mp3"
      autoplay="autoplay"
      preload="auto"
      loop="loop"
  ></audio>
</template>

<script setup>
////////////////////////////////////////////
import {reactive, ref} from "vue";
import {post, setLocalToken} from "@/common";
import {useRouter} from "vue-router";
import {get} from "@/common";
import {message} from "ant-design-vue";
////////////////////////////////////////////
const goToRegister = () => {
  router.push({path: "/security/Register"});
};

const user = reactive({
  user_id: "",
  user_pwd: "",
});

const forgetUser = reactive({
  user_id: "",
  user_pwd: "",
});

const imgSrc = ref("/backgroundRubbish.jpg");

const router = useRouter();

const message1 = ref("");

const type1 = ref("");

const message3 = ref("");

const type3 = ref("");

const type2 = ref("");

const message2 = ref("");

const labelCol = {
  span: 4,
};
const wrapperCol = {
  span: 8,
};

const visible1 = ref(false);

const spin = ref(true);

const audio = ref(null);

////////////////////////////////////////////
const closeMusic = () => {
  spin.value = false;
  audio.value.pause();
};

const openForget = () => {
  visible1.value = true;
};

const gotoForgetPWd = () => {
  post("/security/forgetpassword/checkUser", forgetUser).then((res) => {
    if (res.success) {
      localStorage.setItem("forget.user_id", forgetUser.user_id);
      visible1.value = false;
      router.push({path: "/security/ForgetPwd"});
    }
  });
};

const login = () => {
  if (type1.value == "success") {
    if (type2.value == "success") {
      post("/security/login", user).then((res) => {
        if (res.success) {
          if (res.data == "flag") {
            router.push({path: "/security/RegisteMail"});

            message.info(res.message);
            return;
          }
          const token = res.data;
          setLocalToken(token);
          localStorage.setItem("user_id", user.user_id);

          const web = res.message;

          router.push({path: web});
        } else {
          message.error(res.message);
        }
      });
    } else {
      message.error(message2.value);
    }
  } else {
    message.error(message1.value);
  }
};

const checkId = () => {
  if (user.user_id.length > 0) {
    type1.value = "success";
    message1.value = "";
  } else {
    type1.value = "error";
    message1.value = "请输入账号";
  }
};

const checkId2 = () => {
  if (forgetUser.user_id.length > 0) {
    type3.value = "success";
    message3.value = "";
  } else {
    type3.value = "error";
    message3.value = "请输入账号";
  }
};

const checkPwd = () => {
  if (user.user_pwd.length >= 6) {
    type2.value = "success";
    message2.value = "";
  } else {
    type2.value = "error";
    message2.value = "密码不得少于6位";
  }
};

// <a-form :model="user" :label-col="labelCol" :wrapper-col="wrapperCol">
//     <a-form-item
//       label="账号"
//       has-feedback
//       :validateStatus="type1"
//       :help="message1"
//     >
//       <a-input
//         v-model:value="user.user_id"
//         placeholder="请输入账号"
//         @change="checkId"
//       />
//     </a-form-item>

// <a-form-item
//   label="密码"
//   has-feedback
//   :validate-status="type2"
//   :help="message2"
// >
//   <a-tooltip placement="topLeft">
//     <template #title>请输入密码</template>
//     <a-input-password
//       v-model:value="user.user_pwd"
//       @change="checkPwd"
//       placeholder="请输入密码"
//     />
//   </a-tooltip>
// </a-form-item>
//     <a @click="goToRegister" style="margin-left: 230px"
//       >还没有账户？需要注册</a
//     >
//     <a @click="openForget" style="margin-left: 230px">忘记密码</a>
//   </a-form>
// <a-modal v-model:visible="visible1" title="忘记密码" @ok="gotoForgetPWd">
//   <a-form-item
//     label="账户id"
//     has-feedback
//     :validateStatus="type3"
//     :help="message3"
//   >
//     <a-input
//       v-model:value="forgetUser.user_id"
//       placeholder="请输入账户id"
//       @change="checkId2"
//     />
//   </a-form-item>
// </a-modal>

//   <a-button type="primary" @click="login" style="margin-left: 45%">
//     登录
//   </a-button>
</script>

<style>
.loginPart {
  position: absolute;
  /*定位方式绝对定位absolute*/
  top: 50%;
  left: 50%;
  /*顶和高同时设置50%实现的是同时水平垂直居中效果*/
  transform: translate(-50%, -50%);
  /*实现块元素百分比下居中*/
  width: 450px;
  padding: 50px;
  background: rgba(0, 0, 0, 0.5);
  /*背景颜色为黑色，透明度为0.8*/
  box-sizing: border-box;
  /*box-sizing设置盒子模型的解析模式为怪异盒模型，
    将border和padding划归到width范围内*/
  box-shadow: 0px 15px 25px rgba(0, 0, 0, 0.5);
  /*边框阴影  水平阴影0 垂直阴影15px 模糊25px 颜色黑色透明度0.5*/
  border-radius: 15px;
  /*边框圆角，四个角均为15px*/
}

.loginPart h2 {
  margin: 0 0 30px;
  padding: 0;
  color: #fff;
  text-align: center;
  /*文字居中*/
}

.loginPart .inputbox {
  position: relative;
}

.loginPart .inputElement {
  width: 100%;
  height: 56px;
  padding: 10px 0;
  font-size: 16px;
  color: #fff;
  letter-spacing: 1px;
  /*字符间的间距1px*/
  margin-bottom: 10px;
  border: none;
  /* border-bottom: 1px solid #fff; */
  outline: none;
  /*outline用于绘制元素周围的线
    outline：none在这里用途是将输入框的边框的线条使其消失*/
  background: transparent;
  /*背景颜色为透明*/
}

.login {
  width: 100%;
  height: 100%;
}

.img {
  width: 100%;
  height: 100%;
}

.input {
  background-color: rgba(0, 0, 0, 0);
}

.icon {
  position: absolute;
  top: 20px;
  left: 20px;
}

.text-gradient {
  background-image: linear-gradient(to right, rgb(0, 140, 255), rgb(89, 240, 29));
  background-clip: text;
  color: transparent;

}
</style>




